<template>
	<!-- 立即下单页面 -->
	<view class="orderNow">
		<!-- 头部 -->
		<view class="orderNow-head">
			<view class="search">
				<view class="search-box" @tap="inAddress">
					<image class="search-icon" src="../../static/images/tabbar/position.png" mode=""></image>
					<view v-if="addressDetail==''">
						<view class="search-inputNull">请添加上门地址</view>
					</view>
					<view class="search-input" v-else>
						<view class="search-userinfo">
							<view class="username">{{addressDetail.consignee}}</view>
							<view class="phon">{{addressDetail.consignee_phone}}</view>
						</view>
						<view class="address">{{addressDetail.location}}{{addressDetail.detail}}</view>
					</view>
					<view class="search-arrow">
						<image src="../../static/images/tabbar/rightArrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="orderNow-main">
			<!-- 快捷回收/分类下单 -->
			<view class="orderNow-way">
				<view class="way-switch">
					<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
						<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(index)"
							:id="'top'+index">
							<text :class='tabbarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
						</view>
					</scroll-view>
				</view>
				<!-- 下单类型 -->
				<view class="way-icon">
					<view class="kjhs" v-if="scrollIntoIndex=='index0'">
						<image src="../../static/images/tabbar/xd2.png" mode=""></image>
						<view class="single">单次回收</view>
					</view>
					<view class="kjhs" @tap="recovery(0)" v-else>
						<image :src="singleImgUrl" mode=""></image>
						<view class="single">单次回收</view>
					</view>
					<view class="dqhs" @tap="recovery(1)" v-if="scrollIntoIndex=='index1'">
						<image :src="periodical" mode=""></image>
						<view class="single">定期回收</view>
					</view>
				</view>
			</view>
			<!-- 如果点击分类下单 -->
			<view class="nature" v-if="scrollIntoIndex=='index1'">
				<view class="nature-top">
					<view class="nature-icon">
						<view style="width: 20%;" v-for="(item,index) in natureArr" :key="index"
							@tap="clickNature(index,item)">
							<image :class="itemIndex==index?'ImageBig':''" :src="item.pic_url" mode=""></image>
						</view>
					</view>
					<view class="nature-data">
						<view class="natureData-name">{{natureData.name}}</view>
						<view class="natureData-price">今日预估:{{natureData.children[0].user_price}}/KG</view>
						<image class="natureData-add" src="../../static/images/tabbar/xd5.png" mode=""
							@tap="addnatureData(natureData)"></image>
					</view>
				</view>
				<view class="nature-detail">
					<view class="detail-title">确定本次回收物品</view>
					<view class="detail-none" v-if="natureAdd.length==0">
						<none></none>
					</view>
					<view class="detail-content" v-else v-for="(item,index) in natureAdd" :key="index">
						<view class="content-main">
							<view class="content-img">
								<image :src="item.pic_url" mode=""></image>
							</view>
							<view class="content-text">
								<view class="text-title">{{item.name}}</view>
								<view class="text-grey">{{item.name}}</view>
							</view>
							<view class="content-count">
								<image @tap="cut(index)" src="../../static/images/tabbar/cut.png" mode=""></image>
								<view class="count-box" v-mode="item.count">
									<text v-if="showNumberBox">{{item.count}}</text> &nbsp;&nbsp;KG
								</view>
								<image @tap="add(index)" src="../../static/images/tabbar/add.png" mode=""></image>
							</view>
							<view class="content-cancel">
								<image @tap="cancel(index)" src="../../static/images/tabbar/cancel.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 预约时间、上传照片 -->
			<view class="reservation">
				<!-- 时间日期选择器 -->
				<view class="reservation-title">
					<picker mode="multiSelector" @columnchange="sildeDataChange" @change="onDateChange"
						:range="dataTimeList" :value="dataTimeIndex" class="multiPicker">
						<view class="picker">
							<view class="reservationTime">预约时间</view>
							<view :class="currentDate=='请选择'?'reservationSelect':'reservationData'">{{ currentDate }}
							</view>
							<view class="reservation-img">
								<image src="../../static/images/tabbar/rightArrow.png" mode=""></image>
							</view>
						</view>
					</picker>
				</view>
				<!-- 时间间隔 -->
				<view class="interval" v-if="isShowTime">
					<view class="intervalTitle">时间间隔</view>
					<input class="intervalText" type="text" placeholder="请输入(天)" />
				</view>
			</view>
			<!-- 上传照片 -->
			<view class="reservation-unloadImg">
				<view class="text">
					<text class="text-title">上传照片</text>
					<text class="text-content">(请上传照片，每张4mb以内，最多上传3张)</text>
				</view>
				<view class="uploadbox">
					<upLoadImg></upLoadImg>
				</view>
			</view>
			<!-- 官方客服 -->
			<view class="reply">
				<text>官方客服：</text>
				<text class="replyPhone">{{phon}}</text>
			</view>
			<!-- 免责协议 -->
			<view class="agreement">
				<view class="agreement-main">
					<view class="agreement-top">
						<view :class="ischeck?'':'showCheck'" @tap="checkTap">
							<image v-show="ischeck" src="@/static/images/tabbar/checkbox.png" mode=""></image>
						</view>
						<view class="agreementName" @tap="showPop">免责协议名称</view>
					</view>
					<button class="appointment">立即预约</button>
				</view>
			</view>
			<!-- 弹出框(协议弹框) -->
			<popup v-show="isPopup" :isPopup="isPopup" @changeData="hidePopup"></popup>
		</view>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js"
	import none from "@/otherPages/none/none.vue"
	import upLoadImg from "@/component/uploadImg.vue"
	import popup from "@/component/popup.vue" //协议弹出框
	export default {
		components: {
			none,
			popup,
			upLoadImg
		},
		data() {
			return {
				topbar: [ //滑块的文字内容
					{
						id: 0,
						name: "快捷回收"
					},
					{
						id: 1,
						name: "分类下单"
					}
				],
				tabbarIndex: 0, //选中的索引
				scrollIntoIndex: "index0", //顶栏跟随的索引id
				recoveryIndex: 0, //选中的下单类型
				singleImgUrl: "../../static/images/tabbar/xd2.png", //绿
				periodical: "../../static/images/tabbar/xd3.png", //灰
				isShowTime: false, //是否显示时间间隔
				natureArr: [], //回收的类型
				itemIndex: 0, //默认放大第一张图片
				natureData: {}, //图片底下显示的数据
				natureAdd: [], //新增的下单物品
				showNumberBox: true, //显示数据
				currentDate: "请选择",
				dataTimeList: [], //时间日期选择内容
				dataTimeIndex: [0, 0], //默认选择的索引值
				dataTileChildren: [], //时间选择内容
				phon: "", //客服电话
				ischeck: false, //是否点击选项框
				isPopup: false,
				addressDetail: "", //地址
			};
		},
		onShow() {
			this.getNature()
			this.getAddress()
		},
		mounted() {
			let _this = this
			uni.getStorage({
				key: "phon",
				success(res) {
					// console.log(res)
					_this.phon = res.data
					// console.log("客服电话：",_this.phon)
				}
			})
		},
		methods: {
			getAddress() { //获取默认地址数据
				// ?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=address&m=wjyk_recycle&sign=af6fa483102e7451f094e335cf3ab466&uid=2
				$http({
					url: "?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=address&m=wjyk_recycle&sign=af6fa483102e7451f094e335cf3ab466&uid=2",
					method: "get"
				}).then((res) => {
					console.log(res.data)
					// this.addressDetail = res.data
					res.data.forEach((item) => {
						if (item.is_default == 1) {
							this.addressDetail = item
						}
					})
				})
			},
			onDateChange(e) { //日期选择
				console.log("日期选择：", e)
				//日期
				var index1 = e.detail.value[0]
				var a = this.dataTimeList[0][index1]
				// 时间
				var index2 = e.detail.value[1]
				var b = this.dataTimeList[1][index2]
				this.currentDate = a + "   " + b
				console.log(this.currentDate)
			},
			sildeDataChange(e) { //滑动日期选择触发
				console.log(e)
				if (e.detail.column === 0) { //滑动第一列
					let index = e.detail.value
					let timeOptions = this.dataTileChildren[index] //第二列
					this.$set(this.dataTimeList, 1, timeOptions); // 更新第二列选项
					this.dataTimeIndex[1] = 0 //让第二列选项回到第一行
					this.$forceUpdate() //实例重新渲染页面
				}
			},
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				if (this.tabbarIndex === e) { //当前页
					return;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "index" + e
				this.isShowTime = false
			},
			recovery(e) { //点击下单的类型
				if (e == 0) {
					this.isShowTime = false
					this.singleImgUrl = "../../static/images/tabbar/xd2.png" //绿
					this.periodical = "../../static/images/tabbar/xd3.png" //灰
				} else {
					this.isShowTime = true //显示时间间隔
					this.singleImgUrl = "../../static/images/tabbar/xd1.png" //灰
					this.periodical = "../../static/images/tabbar/xd4.png" //绿
				}
			},
			getNature() { //获取下单分类数据
				$http({
					url: "?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=reserve&op=cateList&m=wjyk_recycle&sign=c1d014e13bae405b270fb0b3782fe4bd&partnerid=3",
					method: "get"
				}).then((res) => {
					// console.log(res)
					this.natureArr = res.data
					this.natureData = this.natureArr[0]
				})
				$http({
					url: "?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=reserve&op=timeList&&m=wjyk_recycle&sign=aae219157dcc28c42fa90ac8dee1cdcf",
					method: "get"
				}).then((res) => {
					let dataTime = res.data.map(item => {
						return item.name
					})
					this.dataTileChildren = res.data.map(item => {
						return item.children
					})
					this.dataTimeList = [dataTime, this.dataTileChildren[0]]
				})
			},
			clickNature(index, imgData) {
				// 点击后全屏显示图片
				// let arr=[];
				//   arr.push(imgsArray.pic_url)
				//   console.log(arr,'图片的地址')
				//   uni.previewImage({
				//        current: 0,
				//        urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
				//   });
				this.itemIndex = index
				this.natureData = imgData
			},
			addnatureData(e) { //点击新增图标
				// console.log(this.natureAdd)
				if (this.natureAdd.indexOf(e) === -1) {
					e.count = 1
					this.natureAdd.push(e)
					// console.log("添加一条")
				} else {
					// console.log("已有数据")
				}
			},
			cut(index) { //点击减号
				if (this.natureAdd[index].count > 1) {
					this.natureAdd[index].count--
					// console.log(this.natureAdd)
					//刷新显示
					let that = this;
					that.showNumberBox = false;
					that.$nextTick(() => {
						that.showNumberBox = true;
					})
				} else {
					return
				}
			},
			add(index) { //点击加号
				this.natureAdd[index].count++
				//刷新显示
				let that = this;
				that.showNumberBox = false;
				that.$nextTick(() => {
					that.showNumberBox = true;
				})
			},
			cancel(index) { //点击取消
				this.natureAdd.splice(index, 1)
			},
			checkTap() { //是否选中
				this.ischeck = !this.ischeck
				// console.log(this.ischeck)
			},
			showPop() { //点击用户协议名称，显示弹出框
				this.isPopup = true
			},
			hidePopup(e) { //关闭遮罩，子组件传递数值
				// console.log(e)
				// 子组件传递false过来，关闭弹框
				this.isPopup = e
			},
			inAddress() { //点击进入地址管理
				uni.navigateTo({
					url: "/otherPages/address-management/address-management"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderNow {
		padding-bottom: 20rpx;

		// 头部部分
		.orderNow-head {
			width: 100%;
			height: 270rpx;
			background: #00b388;
			// border: 1px solid #f00;
			border-radius: 0 0 80rpx 80rpx;
			padding-top: 20rpx;

			.search {
				.search-box {
					display: flex;
					align-items: center;
					padding: 20rpx 10rpx;
					width: 95%;
					// border: 1px solid #ccc;
					background: #fff;
					border-radius: 20rpx;
					margin: 0 auto;

					.search-icon {
						width: 34rpx;
						height: 34rpx;
						margin: 0 20rpx;
					}

					.search-input {
						flex: 1;
						// border: none;
						outline: none;

						.search-userinfo {
							display: flex;
							font-size: 26rpx;
							font-weight: bold;

							.username {
								margin-right: 20rpx;
							}
						}

						.address {
							font-size: 26rpx;
							color: #c5c5c5;
						}
					}

					.search-inputNull {
						flex: 1;
						font-size: 28rpx;
						color: #c5c5c5;
					}
					.search-arrow {
						margin-left: auto;
						// border: 1px solid #f00;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		// 主体部分
		.orderNow-main {
			// border: 1px solid #f00;
			margin-top: -80rpx;
			padding: 0 30rpx;

			// 快捷回收、分类下单
			.orderNow-way {
				border-radius: 10rpx;
				width: 100%;
				// height: 270rpx;
				background: #fff;
				padding: 20rpx 0;
				font-size: 28rpx;

				.way-switch {
					border-bottom: 2rpx solid #f7f7f7;

					// 顶部滑块
					.wasteScroll {
						width: 100%;
						height: 80rpx;
						white-space: nowrap;

						// background: #fff;
						// box-shadow: #e3e3e3 0 0 8px;
						.slider {
							box-sizing: border-box;
							display: inline-block;
							// border: 1px solid #000;
							width: 50%;
							text-align: center;
							padding: 10rpx 30rpx;
							font-size: 32rpx;
						}

						.f-active-color {
							box-sizing: border-box;
							padding: 10rpx 0;
							border-bottom: 6rpx solid #4fc3a5;
							color: #4fc3a5;
						}

						.f-color {
							// color: #ccc;
						}

						// .scrollItem-left{
						// 	height:100%;
						// }
					}
				}

				.way-icon {
					display: flex;

					.kjhs,
					.dqhs {
						width: 50%;
						text-align: center;
						font-size: 28rpx;
						margin-top: 50rpx;

						image {
							// border: 1px solid #f00;
							width: 90rpx;
							height: 90rpx;
						}
					}
				}
			}

			// 下单类型
			.nature {

				// 
				.nature-top {
					box-sizing: border-box;
					margin-top: 20rpx;
					// height: 200rpx;
					width: 100%;
					border-radius: 10rpx;
					background: #fff;
					padding: 20rpx 30rpx;

					// 图片
					.nature-icon {
						display: flex;
						width: 100%;
						// border: 1px solid #f00;
						// width: 20%;
						// flex-wrap: nowrap;
						margin-top: 30rpx;

						image {
							width: 100rpx;
							height: 100rpx;
							transition: transform 0.3s;
						}

						.ImageBig {
							//点击后图片放大
							border: 2rpx solid #00b388;
							border-radius: 10rpx;
							transform: scale(1.1);
						}
					}

					// 数据
					.nature-data {
						display: flex;
						justify-content: space-between;
						margin: 30rpx 0;
						font-size: 26rpx;
						align-items: center;

						.natureData-name {}

						// 价格
						.natureData-price {
							color: #00b388;
						}

						.natureData-add {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				// 确定本次回收物品
				.nature-detail {
					box-sizing: border-box;
					padding: 20rpx 30rpx;
					width: 100%;
					// height: 200px;
					background: #fff;
					border-radius: 10rpx;
					margin-top: 20rpx;

					.detail-title {
						font-size: 26rpx;
						font-weight: bold;
					}

					// 没有数据
					.detail-none {
						width: 100%;
						height: 500rpx;
						// border: 1px solid #000;
					}

					// 有数据
					.detail-content {
						margin-top: 20rpx;

						.content-main {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.content-img {
								width: 100rpx;

								// border: 1px solid #f00;
								image {
									width: 100rpx;
									height: 100rpx;
								}
							}

							.content-text {
								margin-left: -70rpx;
								width: 18%;

								// border: 1px solid #f0f;
								.text-title {
									font-size: 28rpx;
								}

								.text-grey {
									font-size: 25rpx;
									color: #c6c6c6;
								}
							}

							.content-count {
								width: 39%;
								display: flex;
								align-items: center;

								.count-box {
									font-size: 25rpx;
									width: 50%;
									height: 40rpx;
									line-height: 40rpx;
									border: 2rpx solid #ccc;
									border-radius: 5px;
									margin: 0 10rpx;
									text-align: right;
								}

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}

							.content-cancel {
								width: 5%;
								margin-right: 20rpx;

								image {
									width: 34rpx;
									height: 34rpx;
								}
							}
						}

					}
				}
			}

			// 预约时间
			.reservation {
				width: 100%;
				margin-top: 20rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 10rpx 10rpx 0 0;
				border-bottom: 2rpx solid #f7f7f7;
				.reservation-title {
					.picker {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						// justify-content: space-between;
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background-color: #fff;
						border-radius: 8rpx;

						.reservationTime {
							// width: 30%;
							// border: 1px solid #f00;
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 40rpx;
							text-align: left;
						}

						.reservationSelect {
							//请选择
							color: #808080;
							// width: 20%;
							// border: 1px solid #f0f;
							text-align: left;
						}

						.reservationData {
							//选择时间后
							color: #000;
							text-align: left;
						}

						.reservation-img {
							// width: 50%;
							margin-left: auto;
							text-align: right;

							// border:1px solid #000;
							image {
								width: 26rpx;
								height: 26rpx;
							}
						}
					}
				}

				// 时间间隔
				.interval {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 8rpx;

					.intervalTitle {
						margin-right: 40rpx;
					}

					.intervalText {
						// border: 1px solid #000;
						text-align: left;
					}
				}
			}
			// 上传照片
			.reservation-unloadImg {
				padding: 20rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 0 0 10rpx 10rpx;
				.text {
					.text-title {
						font-size: 30rpx;
						font-weight: bold;
					}
			
					.text-content {
						font-size: 26rpx;
						color: #888888;
					}
				}
			}
			// 官方客服
			.reply {
				margin-top: 20rpx;
				font-size: 27rpx;
				color: #f00;

				.replyPhone {
					text-decoration: underline;
				}
			}

			// 免责协议
			.agreement {
				width: 100%;
				margin: 20rpx 0;

				.agreement-main {
					.agreement-top {
						margin-bottom: 20rpx;
						display: flex;
						justify-content: center;
						// align-items: flex-end;
						// border: 1px solid #f00;
						height: 38rpx;

						.showCheck {
							width: 33rpx;
							height: 33rpx;
							padding: 0;
							background: #fff;
							border-radius: 4rpx;
							border: 2rpx solid #d9d9d9;
						}

						image {
							width: 33rpx;
							height: 38rpx;
							margin: 0;
						}

						.agreementName {
							color: #00b388;
							font-size: 28rpx;
							text-decoration: underline;
						}
					}

					.appointment {
						background: #00b388;
						color: #fff;
						width: 40%;
						font-size: 29rpx;
					}
				}
			}
		}
	}
</style>